import React from 'react';
import { Icon, Button, Spin, message, Modal, Form } from 'antd';
import { printScreenDown } from '@/pages/EntryManage/utils';
import { useHireConfirm } from '@/pages/RecruitEmail/hooks';
import LimitInput from '@/components/LimitInput';
// import { getLoginInfo } from '@/pages/RecruitEmail/service';
import { acceptRecruitmentByEncryptId } from '@/pages/RecruitEmail/service/user';
import styles from './index.less';
// const { Paragraph, Text } = Typography;

const Paragraph = ({ children, style }) => {
    const marginStyle = {
        margin: '12px 0',
        ...style
    };
    return <div style={marginStyle}>{children}</div>;
};

const ConfirmPage = ({
    setOfferEffectiveValue,
    setStatus,
    setCompanyName,
    nid,
    setData,
    form,
    isDetailPage = false
}) => {
    // const { query = {} } = location;
    // const { employId } = query;
    // const [agree, setAgree] = React.useState(false);
    const { getFieldDecorator } = form;
    const [showRefuse, setShowRefuse] = React.useState(false);
    const [refuseSubmitLoading, setRefuseSubmitLoading] = React.useState(false);
    const { infoData, loadingData, handleAccept, submitLoading } = useHireConfirm({
        setOfferEffectiveValue,
        setStatus,
        setCompanyName,
        employId: nid,
        isDetailPage,
        agree: true
    });
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
    };

    React.useEffect(() => {
        if (infoData) {
            setData(infoData);
        }
    }, [JSON.stringify(infoData)]);

    const submitReject = () => {
        form.validateFields(async (err, values) => {
            if (!err) {
                console.log(values);
                setRefuseSubmitLoading(true);
                // 拒绝录用：employState 8
                const res = await acceptRecruitmentByEncryptId({ ...values, employId: nid, employState: 8 });
                setRefuseSubmitLoading(false);
                setShowRefuse(false);
                if (res.code === 10000) {
                    setStatus('reject');
                } else {
                    message.error(res.msg);
                }
            }
        });
    };
    const refuseModal = (
        <Modal
            okButtonProps={{ style: { marginTop: '9px', marginBottom: '9px' } }}
            visible={showRefuse}
            onOk={() => {
                submitReject();
            }}
            onCancel={() => {
                setShowRefuse(false);
            }}
            confirmLoading={refuseSubmitLoading}
            title="拒绝录用"
            centered
        >
            <div className={styles.refuseCon}>
                {/* <span className={styles.refuseInfo}>很遗憾没能跟您进一步沟通，希望您能提供拒绝面试的原因</span> */}
                <Form {...formItemLayout}>
                    {/* <Form.Item label="拒绝原因">
                        {getFieldDecorator('terminationType', {
                            initialValue: undefined,
                            rules: [{ required: true, message: '请选择原因' }]
                        })(
                            <Select
                                style={{ width: '100%' }}
                                placeholder="请选择原因"
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                            >
                                {listReason.map(item => (
                                    <Option value={item.value} key={item.value}>
                                        {item.label}
                                    </Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item> */}
                    <Form.Item label="拒绝原因" style={{ marginTop: '32px' }}>
                        {getFieldDecorator(
                            'remark',
                            {}
                        )(
                            <LimitInput
                                placeholder="请输入"
                                area
                                maxLength={200}
                                autoSize={{ minRows: 3, maxRows: 6 }}
                            />
                        )}
                    </Form.Item>
                </Form>
            </div>
        </Modal>
    );

    const pageContent = (
        <div style={{ paddingBottom: '200px' }}>
            <div id="printPage" style={{ padding: '20px 248px 20px 348px', wordBreak: 'break-all', fontSize: 12 }}>
                <div dangerouslySetInnerHTML={{ __html: infoData?.templateContent }} />
                <Paragraph>
                    <a
                        style={{ fontSize: '14px', color: '#5590F6' }}
                        onClick={() => {
                            // doPrint3();
                            printScreenDown(document.querySelector('#printPage'), '录用通知书');
                        }}
                    >
                        <Icon type="download" style={{ marginRight: '8px', color: '#5590F6' }}></Icon>
                        下载录用通知书
                    </a>
                    <div
                        style={{
                            fontSize: '14px',
                            color: '#8C8C8C',
                            height: '24px',
                            lineHeight: '24px',
                            marginTop: '10px'
                        }}
                    >
                        录用通知书 PDF 文档已随录用邮件发送到您的邮箱，可随时前往邮箱查阅
                    </div>
                </Paragraph>
            </div>

            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
                <Button
                    className={styles.buttonWrap}
                    onClick={() => {
                        form.resetFields();
                        setShowRefuse(true);
                    }}
                >
                    拒绝
                </Button>
                <Button className={styles.buttonWrap} loading={submitLoading} type="primary" onClick={handleAccept}>
                    接受
                </Button>
            </div>
            {refuseModal}
        </div>
    );

    return (
        <Spin spinning={loadingData}>
            {isDetailPage && pageContent}
            {!isDetailPage && (
                <>
                    {pageContent}
                    {/* <Row className={styles.footConfirm}>
                        <Col span={16} offset={4}> */}
                    {/* <Checkbox */}
                    {/*    checked={agree} */}
                    {/*    onChange={() => setAgree(!agree)} */}
                    {/*    style={{ marginRight: '16px' }} */}
                    {/* ></Checkbox> */}
                    {/* 确认接受录用并同意在入职前提供背调联系信息，接受背调 */}
                    {/* <div className={styles.buttonWrap}>
                                <Button onClick={handleReject}>拒绝</Button>
                                <Button loading={submitLoading} type="primary" onClick={handleAccept}>
                                    接受
                                </Button>
                            </div> */}
                    {/* </Col> */}
                    {/* </Row> */}
                </>
            )}
        </Spin>
    );
};

export default Form.create()(ConfirmPage);
